<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<text class="title">中运通登录</text>
		</view>
		<view class="login-form-content">
			<div style="margin-bottom: 20px;">
				<up-input style="height: 46px;" type="number" placeholder="请输入账号" prefixIcon="account"
					prefixIconStyle="font-size: 22px;color: #909399" shape="circle" v-model="loginForm.username"
					clearable></up-input>
			</div>
			<div>
				<up-input style="height: 46px;" placeholder="请输入密码" prefixIcon="lock"
					prefixIconStyle="font-size: 22px;color: #909399" shape="circle" password
					v-model="loginForm.password" clearable></up-input>
			</div>
			<view class="action-btn">
				<button @click="userLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
			</view>
			<div style="display: flex;justify-content: space-around;padding: 20px 0;">
				<text class="text-blue" @click="resetPassword">忘记密码</text>
				<text class="text-blue" @click="goRegister">立即注册</text>
			</div>
			<div class="text-blue"
				style="margin-bottom: 20px;display: flex;justify-content: center;align-items: center;">
				<div @click="goCodeLogin">验证码登录</div>
			</div>
			<view class="xieyi text-center check" style="margin: 0;">
				<div style="display: flex;flex-wrap: wrap;align-items: center;"
					:style="{ padding: windowWidth > 375 ? '0 10%' : '0 5%' }">
					<up-checkbox name="agree" usedAlone v-model:checked="isAgree">
					</up-checkbox>
					<view>
						<text class="text-grey1" @click="() => isAgree = !isAgree">我已阅读并同意</text>
						<text class="text-blue" @click="privacyAgreement">《隐私协议》</text>
						<text class="text-grey1">和</text>
					</view>
					<view style="margin-left: 20px;">
						<text class="text-blue" @click="serviceAgreement">《平安结算通商户服务协议》</text>
					</view>
				</div>
			</view>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script lang="ts" setup>
import {
	ref,
	reactive
} from "vue"
import {
	login
} from "@/api/login"
import {
	encrypt
} from "@/utils/encryption"
import {
	useUserStore
} from "@/store/modules/user"

/* hooks */
const {
	LOGIN_SUCC
} = useUserStore()



/* 数据 */
// 屏幕宽度
const windowWidth = ref(uni.getWindowInfo().screenWidth)
// 隐私政策同意
const isAgree = ref(false)
// 提示
const uToastRef = ref<any>(null)
const loginForm = reactive({
	username: "",
	password: "",
})



/* 函数 */
// 登录
const userLogin = async () => {
	if (!loginForm.username) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请填写账号"
		})
		return
	}
	if (!loginForm.password) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请填写密码"
		})
		return
	}
	if (!isAgree.value) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请阅读并勾选协议"
		})
		return
	}
	let params = {
		username: encrypt(loginForm.username) as string,
		password: encrypt(loginForm.password) as string
	}
	uToastRef.value.show({
		type: 'loading',
		message: "登录中",
		duration: -1
	})
	let res = await login(params)
	uToastRef.value.hide()
	if (res.success) {
		LOGIN_SUCC(res.data, loginForm.username)
		uToastRef.value.show({
			position: "top",
			type: 'success',
			message: "登录成功",
			complete: async () => {
				uni.reLaunch({
					url: "/pages/mine/index"
				})
			}
		})
	}
}
// 隐私协议
const privacyAgreement = () => {
	if (!isAgree.value) isAgree.value = true
	uni.navigateTo({
		url: '/pages/common/webview/index'
	})
}
// 服务协议
const serviceAgreement = () => {
	if (!isAgree.value) isAgree.value = true
	uni.navigateTo({
		url: '/pages/common/webview/pinganjiesuantong'
	})
}
// 忘记密码
const resetPassword = () => {
	uni.reLaunch({
		url: "/pages/forgotPassword"
	})
}
// 去注册
const goRegister = () => {
	uni.reLaunch({
		url: "/pages/register"
	})
}
// 去验证码登录
const goCodeLogin = () => {
	uni.reLaunch({
		url: "/pages/codeLogin"
	})
}
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.logo-content {
		width: 100%;
		font-size: 21px;
		text-align: center;
		padding-top: 15%;

		image {
			border-radius: 4px;
		}

		.title {
			margin-left: 10px;
		}
	}

	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;

		.input-item {
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

		}

		.login-btn {
			margin-top: 40px;
			height: 45px;
		}

		.reg {
			margin-top: 15px;
		}

		.xieyi {
			color: #333;
			margin-top: 20px;
		}

		.login-code {
			height: 38px;
			float: right;

			.login-code-img {
				height: 38px;
				position: absolute;
				margin-left: 10px;
				width: 200rpx;
			}
		}
	}
}
</style>